<template>
  <div>
    <el-dialog
      v-model="model"
      @close="closedDialog"
      width="600px"
      :title="$t('flow.goback')"
    >
      <el-form
        ref="taskFormRef"
        :model="taskFrom"
        label-width="100px"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('task.taskDefKey')" prop="taskDefKey">
              <el-select
                v-model="taskFrom.taskDefKey"
                placeholder="请选择退回节点"
                style="width: 420px"
              >
                <el-option
                  v-for="taskDef in goBackTaskDef"
                  :key="taskDef.taskDefKey"
                  :label="taskDef.taskName"
                  :value="taskDef.taskDefKey"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('task.goBackComment')" prop="comment">
              <el-input
                v-model="taskFrom.comment"
                style="width: 420px"
                :rows="4"
                type="textarea"
                placeholder="请输入意见"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closedDialog">{{ $t("common.cancel") }}</el-button>
          <el-button type="primary" @click="submitForm">
            {{ $t("common.confirm") }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, type PropType, watch, reactive } from "vue";
import { type FormInstance, type FormRules, ElMessage } from "element-plus";
import type {
  FlowGobackTaskRequest,
  FlowTaskDefModel,
  FlowTaskDefList,
} from "@/api/flow/task/types";
import { taskApi } from "@/api/flow/task/index";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const taskFormRef = ref<FormInstance>();
const rules = reactive<FormRules<FlowGobackTaskRequest>>({
  taskDefKey: [
    {
      required: true,
      message: t("task.taskDefKey"),
      trigger: "change",
    },
  ],
  comment: [
    {
      required: true,
      message: t("task.goBackComment"),
      trigger: "change",
    },
  ],
});

const goBackTaskDef = ref([] as FlowTaskDefModel[]);

const props = defineProps({
  taskId: {
    type: String,
    default: "",
  },
});

if (props.taskId) {
  taskApi.findTaskDefAllowGoback(props.taskId).then(({ data }) => {
    goBackTaskDef.value.length = 0;
    console.log(data.results);
    goBackTaskDef.value.push(...data.results);
    console.log(goBackTaskDef);
  });
}

const taskFrom = ref<FlowGobackTaskRequest>({
  requestId: Math.random() + "task",
  taskId: props.taskId,
});
const emits = defineEmits(["refresh"]);

// 提交表单校验
const submitForm = async () => {
  await taskFormRef.value?.validate((valid) => {
    if (valid) {
      taskApi.gobackTask(taskFrom.value).then((res) => {
        if (res.status === 200) {
          ElMessage({
            message: t("common.submitSuccess"),
            type: "success",
          });
          emits("refresh", res.status === 200);
          closedDialog();
        }
      });
    }
  });
};

const model = defineModel<boolean>();
// 关闭弹框
function closedDialog() {
  if (model.value) {
    model.value = false;
  }
}
</script>
